<template>
  <div class="container">
    <a-breadcrumb>
      <a-breadcrumb-item>
        <icon-home />
      </a-breadcrumb-item>
      <a-breadcrumb-item>设置</a-breadcrumb-item>
      <a-breadcrumb-item>考试管理</a-breadcrumb-item>
    </a-breadcrumb>
    <a-card title="考试管理">
      <a-row>
        <a-col :flex="1">
          <a-form :model="formModel" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
            label-align="left">
            <a-row :gutter="16">
              <a-col :span="8">
                <a-form-item label="考试代码">
                  <a-input v-model="formModel.examCode" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="考试名称">
                  <a-input v-model="formModel.examName" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
        <a-divider style="height: 32px" direction="vertical" />
        <a-col :flex="'86px'" style="text-align: right">
          <a-space direction="vertical" :size="18">
            <a-button type="primary" @click="search">
              <template #icon><icon-search /></template>搜索
            </a-button>
          </a-space>
        </a-col>
      </a-row>

      <a-divider style="margin-top: 0" />

      <a-row style="margin-bottom: 16px">
        <a-col :span="12">
          <a-space>
            <a-button type="primary" @click="addNew">
              <template #icon>
                <icon-plus />
              </template>
              新建
            </a-button>
          </a-space>
        </a-col>
        <a-col :span="12" class="btn-right-col">
        </a-col>
      </a-row>

      <a-table row-key="examId" :loading="loading" :pagination="pagination" :columns="columns" :data="renderData"
        :bordered="false" :scroll="scrollPercent" :scrollbar="scrollbar" :size="'medium'" @page-change="onPageChange">
        <template #enable="{ record }">
          <a-switch v-model="record.enabled" disabled />
        </template>
        <template #operations="{ record }">
          <span style="font-size: 1.3em; color: #777;">
            <icon-nav @click="btnEditStructure(record)" />
            <icon-edit @click="btnEdit(record)" />
            <icon-delete @click="btnDelete(record, fetchData)" />
          </span>
        </template>
      </a-table>
    </a-card>

    <a-modal :visible="modalType == 2" modal-class="big" :footer="modalType > 1" @ok="btnEditSave(fetchData)"
      @cancel="modalType = 0">
      <template #title>
        考试详情 <div v-if="currRecord.examId">&nbsp;#{{ currRecord.examId }}</div>
      </template>
      <a-form :model="currRecord" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }" label-align="right"
        :disabled="modalType == 1">
        <a-form-item label="考试代码" required>
          <a-input v-model="currRecord.examCode" />
        </a-form-item>
        <a-form-item label="考试名称" required>
          <a-input v-model="currRecord.examName" />
        </a-form-item>
        <a-form-item label="学科" required>
          <a-select v-model="currRecord.subjectId" :options="subjectIds" />
        </a-form-item>
        <a-form-item label="语言代码" required>
          <a-input v-model="currRecord.languageCode" />
        </a-form-item>
        <a-form-item label="总分" required>
          <a-input-number v-model="currRecord.totalScore" mode="button" :default-value="0" :min="0" :max="999"
            :precision="0" />
        </a-form-item>
        <a-form-item label="时间限制" required>
          <a-input-number v-model="currRecord.totalTimeLimit" mode="button" :default-value="0" :min="0" :max="180"
            :precision="0" />
        </a-form-item>
        <a-form-item label="总题数" required>
          <a-input-number v-model="currRecord.totalProblemQuantity" mode="button" :default-value="0" :min="0" :max="100"
            :precision="0" />
        </a-form-item>
        <a-form-item label="备注">
          <a-textarea v-model="currRecord.remark" />
        </a-form-item>
        <a-form-item label="是否可用">
          <a-switch v-model="currRecord.enabled" />
        </a-form-item>
      </a-form>
    </a-modal>


    <a-modal :visible="modalType == 3" modal-class="big" :width="800" :height="600" :footer="modalType > 1"
      @ok="btnEditStructSave(currRecord, fetchData)" @cancel="modalType = 0">
      <template #title>
        试卷结构 <div v-if="currRecord.examId">&nbsp;#{{ currRecord.examId }} - {{ currRecord.examName }}</div>
      </template>
      <a-form :model="currRecord" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 24 }" label-align="right"
        :disabled="modalType == 1">
        <div>
          <a-card title="选择考试使用的题目及问题类型">
            <template #extra>
              <span style="color: #71717B; font-size: 13px;">简单模式</span>&nbsp;
              <a-switch size="medium" v-model="simpleModeSwitch" :disabled="true">
              </a-switch>&nbsp;
              <span style="color: #71717B; font-size: 13px;">组合模式</span>&nbsp;
              <a-switch type="round" size="medium" checked-color="#F53F3F" v-model="compositeModeSwitch" :disabled="true">
              </a-switch>&nbsp;
              <span style="color: #71717B; font-size: 13px;">混合模式</span>&nbsp;
              <a-switch type="line" size="medium" checked-color="#14C9C9" v-model="hybirdModeSwitch" :disabled="true">
              </a-switch>
            </template>
            <div v-for="(item, idx) in examTypeRelations" :key="idx">
              <a-form-item>
                <a-switch size="small" v-if="simpleModeSwitch == true" v-model="item.simpleMode">
                  <template #checked-icon>
                    <icon-check />
                  </template>
                  <template #unchecked-icon>
                    <icon-close />
                  </template>
                </a-switch>&nbsp;
                <a-switch type="round" size="small" v-if="compositeModeSwitch == true" v-model="item.compositeMode"
                  checked-color="#F53F3F">
                  <template #checked-icon>
                    <icon-check />
                  </template>
                  <template #unchecked-icon>
                    <icon-close />
                  </template>
                </a-switch>&nbsp;
                <a-switch type="line" size="small" v-if="hybirdModeSwitch == true" v-model="item.hybirdMode"
                  checked-color="#14C9C9">
                  <template #checked-icon>
                    <icon-check />
                  </template>
                  <template #unchecked-icon>
                    <icon-close />
                  </template>
                </a-switch>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span> {{ item.typeDescription }}</span>
              </a-form-item>
            </div>
          </a-card>
        </div>
      </a-form>
    </a-modal>

  </div>
</template>

<script lang="ts" setup>

import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import { modalType, currRecord, addNew, btnEdit, btnDelete, btnEditSave, btnEditStructure, btnEditStructSave, examTypeRelations, simpleModeSwitch, compositeModeSwitch, hybirdModeSwitch } from './event';
import { formatTime, getPostData } from '@/utils';
import useLoading from '@/hooks/loading';
import type { TableColumnData, TableData } from '@arco-design/web-vue/es/table/interface';
import { getSubjects } from '@/api/lms/subjects';
import { getList } from '@/api/lms/exams';
import { getOptions } from '@/api/base';
import { formModel, pagination, columns } from './const';



const scrollbar = ref(true);
const scroll = {
  x: 2000,
  y: 200
};
const scrollPercent = {
  x: '100%',
  y: '100%'
};

const router = useRouter();
const { loading, setLoading } = useLoading(true);
let subjectIds = getSubjects();
const renderData = ref<TableData[]>();

const search = () => {
  pagination.current = 1;
  fetchData();
};

const onPageChange = (current: number) => {
  pagination.current = current;
  fetchData();
};

const fetchData = async () => {
  let pdata = getPostData(pagination, formModel.value, 'examId');
  setLoading(true);
  const data = await getList(pdata);
  pagination.total = data.totalCount;
  renderData.value = data.items;
  setLoading(false);
};

fetchData();
</script>
